<template>
    <el-form ref="form" label-width="80px" style="padding:20px" size="mini" label-position="left">
        <el-form-item label="登录姓名">
            <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
            <el-input v-model="name" placeholder="用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="用户电话">
            <el-input v-model="phone" placeholder="用户电话"></el-input>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
                <img v-if="headimg" :src="headimg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="签名">
            <el-input type="textarea" :rows="2" placeholder="请填写管理员描述信息！" v-model="remarks"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="close">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import C from '#/src/common/common.js'
import * as qiniu from 'qiniu-js'


export default {
    name: 'addAdmin',
    data() {
        return {
            id: 0,
            name: '',
            phone: '',
            username: '',
            headimg: '',
            remarks: '',
            file: {}
        }
    },
    methods: {
        async submit() {
            if (!(/^[\u4e00-\u9fa5]{2,4}$/.test(this.name))) {
                C.error('用户名为2到4个汉字')
                return false
            } else if (!(/^1[345678]\d{9}$/.test(this.phone))) {
                C.error('手机号不正确')
                return false
            }
            let that = this


            // 如果图片有变动开始上传图片
            if (this.file.name) {
                // 开始获取上传的token
                let token = await C.ajax('/login/public/gettoken')
                let keyName = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate() + '/' + this.file.name
                let observable = qiniu.upload(this.file.raw, keyName, token.uptoken)
                observable.subscribe({
                    next(res) {
                        // console.log(res)
                    },
                    error(err) {
                        C.error('上传失败！')
                    },
                    complete(res) {
                        // console.log(res)
                        // 上传成功后开始提交表格
                        let data = {
                            id: that.id,
                            name: that.name,
                            phone: that.phone,
                            username: that.username,
                            headimg:  'http://odfb8y4in.bkt.clouddn.com/' + res.key,
                            remarks: that.remarks
                        }
                        that.submitForm(data)
                    }
                })
            } else {
                let data = {
                    id: this.id,
                    name: this.name,
                    phone: this.phone,
                    username: this.username,
                    remarks: this.remarks
                }
                this.submitForm(data)
            }
        },
        close() {
            C.closeBrowserWindow()
        },
        async changeImg(file, fileList) {
            // console.log(file)
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/gif'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                C.error('上传头像图片格式错误!')
                return
            }
            if (!isLt2M) {
                C.error('上传头像图片大小不能超过 2MB!')
                return
            }
            this.file = file
            this.headimg = file.url        
        },
        async submitForm (data) {
            let res = await C.ajax('/shop/admin/edit',data,'post')
            if (res) {
                C.success(res.data.info)
            }
        }
    },
    mounted: async function() {
        let row = await C.ajax('/shop/index/getadmininfo', {}, 'post')
        if (row && row.ainfo.id) {
            this.id = row.ainfo.id
            this.name = row.ainfo.name
            this.phone = row.ainfo.phone
            this.username = row.ainfo.username
            this.headimg = row.ainfo.headimg
            this.remarks = row.ainfo.remarks
        }
    }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>